<template>
    <div class="box">
        <header>
         <i @click="back" class="iconfont">&#xe663;</i>
         <p>增加地址</p>
         
     </header>
        <van-address-edit
        :area-list="areaList"
      
        tel-maxlength="11"
       
        show-delete
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
        />
    </div>
</template>

<script>
import { Toast } from 'vant';
import { areaList } from '@vant/area-data';
import {ajax_addAddress} from '../ajax/index'
import {mapState} from 'vuex'
export default {

  data() {
    return {
      areaList,
      searchResult: [],
    };
  },
  computed:{
    ...mapState(['users'])
  },
  methods: {
    onSave(content) {
      // Toast('save');
      console.log(content);
      var reg_tel=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if(reg_tel.test(content.tel)){
        ajax_addAddress({
          user_Id:this.users.Id,
          address:content.province+content.city+content.county+content.addressDetail,
          phone:content.tel,
          username:content.name,
          isTrue_mo:(content.isDefault)*1
        }).then(data=>{
          console.log(data);
          if(data.code==1){
             Toast(data.msg)
             this.$router.push("/addressList")
          }
          
        })
        return false;
      }else{
        Toast("手机号格式不正确")
        alert("手机号格式不正确")
      }
    },
    onDelete() {
      Toast('delete');
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: '黄龙万科中心',
            address: '杭州市西湖区',
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
    // phone(val){
    //    console.log(val)
    // },
    back(){
        this.$router.push('/addressList')
    }
  },
};
</script>

<style scoped>

.box >>> .van-switch__node{
    width: 6.5vw;
    height: 6.5vw;
}
.box >>> .van-switch--on .van-switch__node{
    transform: translateX(6.5vw);
}
header{
    position: relative;
    width: 100vw;
    padding: 2vh 0;
    text-align: center;
    background-image: linear-gradient(to right top,rgba(193, 218, 82, 0.884),rgb(174, 0, 255),blue);
}
header>i{
  position: absolute;
  left: 5vw;
}
</style>